Default Value and Behavior of transform-origin in CSS
In CSS, the default value of the transform-origin property is center (50% 50%). This means that any transformation—such as rotation, scaling, or skewing—occurs around the geometric center of the element by default.
In this example, the .box rotates 45 degrees around its center point because the transform-origin is not explicitly set. This default behavior ensures consistent and balanced transformations.
transform-origin: center;transform-origin: 50% 50%;transform-origin: center center;
All three notations above represent the same default positioning — the center of the element’s box. You can modify this origin point to any other reference using keywords, percentages, or length values.
In the example above, .box1 rotates around its center (default), .box2 rotates from the top-left corner, and .box3 rotates around the bottom-right corner.
Use the default center origin for balanced transformations like rotation or scaling.
Change the origin point for creative effects, such as door swings or pointer movements.
Always test animations after changing the
transform-origin, as it can greatly affect visual motion.